<template>
  <div class="bianli-box" v-if="p" @click="godetail">
    <div class="img2">
      <img :src="$store.state.imgBase + p.bookimg" alt="" />
    </div>
    <div class="xq">
      <h3>{{ p.bookname }}</h3>
      <p class="yincang">
        内容内容内容内容容内容内容容内容内容内容内容内容内容内容内容
        内容内容内容内容容容内容内容内容 内容内容内容内容容内内内容
      </p>
      <div class="zuozhe">
        <span>期刊</span>
        <span class="span">{{ p.bookauthor }}</span>
      </div>
    </div>
  </div>


</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
</style>

<script>
export default {
  // mounted() {
  //   this.getData();
  // },
  props: ['p'],
  data() {
    return {
     
     
    }
  },
  methods: {
   godetail() {
       this.$router.push('/details')
    }
  },
  
 
};
</script>

<style lang="scss" scoped>
.history {
  background-color: rgb(252, 237, 237);
  width: 100%;
  height: 100%;
}

.main1 {
  background-color: rgb(252, 237, 237);
  height: 1660px;

  // 最畅销书籍
  .popr {
    background-color: rgb(252, 237, 237);

    height: 570px;

    // h2 {
    //   font-size: 20px;
    //   font-weight: 500;
    //   margin-bottom: 60px;
    // }
    .box {
      width: 1200px;
      height: 1000px;
      margin: auto;
      background-color: rgb(252, 237, 237);
      // background-color: aquamarine;

      // margin-left: 20px;
      h2 {
        height: 50px;
        // background-color: blueviolet;
        width: 100%;
        text-align: left;
        line-height: 50px;
        font-size: 25px;
        letter-spacing: 2px;
        border-bottom: 2px solid grey;
      }

      .bianli {
        // width: 100%;
        // height: 1200px;
        // background-color: burlywood;
        // display: flex;
        // justify-content:space-between ;
        // flex-wrap: wrap;

        .bianli-box {
          margin-top: 30px;
          width: 33%;
          height: 300px;
          // background-color: brown;
          display: flex;
          // margin-top: 10px;

          .img2 {
            width: 50%;
            height: 200px;

            img {
              height: 260px;
              width: 100%;
            }
          }

          .xq {
            width: 120px;
            height: 300px;
            // background-color: red;
            margin-left: 30px;
            text-align: left;

            h3 {
              text-align: left;
              line-height: 18px;
              height: 50px;
              width: 150px;
              // background-color: beige;
              margin-top: 21px;
              font-size: 18px;
            }

            .yincang {
              width: 140px;
              height: 100px;
              margin-top: 20px;
              line-height: 20px;
              //   文字溢出时省略号显示（伸缩盒子）
              -webkit-box-orient: vertical;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              overflow: hidden;
            }

            .zuozhe {
              display: flex;
              justify-content: space-around;
              // background-color: blue;


              span {
                height: 40px;
                width: 90px;
                margin-top: 50px;
                // background-color: aquamarine;
                line-height: 40px;
                letter-spacing: 2px;
                text-align: left;
                font-size: 17px;
              }
            }
          }
        }
      }

      .page {
        margin-top: 10px;
        display: flex;
        justify-content: center;

        span {
          display: inline-block;
          height: 30px;
          width: 30px;
          margin-left: 5px;
          margin-right: 5px;
          text-align: center;
          background-color: antiquewhite;
          line-height: 30px;
        }
      }
    }
  }

  .nav-text {
    margin: auto;
    // background-color: aquamarine;
    height: 60px;
    width: 600px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    a {
      font-size: 18px;
    }
  }
}
</style>